<template>
  <div>
   <div class="top_nav">
       
        <van-icon @click="returnTap" class="icon" name="arrow-left" style="color: #fff;font-size:18px" />
      <span class="title">消息</span>
      <span class="btn" @click="showlist"> 清空</span>
    </div>
    <div class="list_item">近五天</div>
    <div class="list" v-for="(item,index) in 5" :key="index">
   <div class="disrc">
            <img src="../../../static/images/me/headimg.png" class="headimg" alt="">
            <div class="name_distance">
                <div class="name">
                    <span>开心就幸福</span>
               
                </div>
                <div class="distance">嗨都是附近的人</div>
            </div>

       </div>
       <div class="autograph" @click="gotobearbyverif">查看</div>
   </div>
   <div class="list_item">五天前</div>
    <div class="list" v-for="item in 2" :key="item">
   <div class="disrc">
            <img src="../../../static/images/me/headimg.png" class="headimg" alt="">
            <div class="name_distance">
                <div class="name">
                    <span>开心就幸福</span>
             
                </div>
                <div class="distance">嗨都是附近的人</div>
            </div>

       </div>
       <div class="outautograph">已过期</div>
   </div>
   
 <div class="mo_bg" @click="closelist" v-if="show"></div>
    <div class="list_box" v-if="show">
      
       <div class="tip tls">确定清除打招呼的人</div>
        <div class=" tip main_btn">清空所有信息</div>
         <div class="tip coloer" @click="closelist">取消</div>
    </div>
  </div>
</template>
<script>


export default {
    data(){
      return{
          show:false,
      }
    },
methods:{
    returnTap(){
        this.$router.go(-1)
    },
    showlist(){
this.show = true
    },
    closelist(){
this.show = false
    },
    gotobearbyverif(){
        this.$router.push({path:'/nearbyverif'})
    }
 
}
};
</script>
<style scoped>

.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
   /* background: #eeeeee; */
   background: #4ac7d7;
  color: #fff;
}
.return_icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}
.btn {
  /* color: #06c25f; */
}
.title{
font-weight: 600;
}
.list_item{
    height: 30px;
    color: #8B8B8B;
    background: #eeeeee;
    padding: 3px 10px;
  line-height: 30px;
}
.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom:1px solid  #e3e4e5;
    background: #fff;
}
.disrc{
    display: flex;
    justify-content: center;
    align-items: center;
}
.headimg{
    width: 50px;
    height: 50px;
}
.name_distance{
margin-left: 10px;
}
.name{
position: relative;
}

.distance{
    font-size: 12px;
    color: #7E7E7E;
}
.autograph{
    background: #4ac7d7;
    color:#fff;
    font-size: 12px;
    padding:4px 10px ;
    max-width: 120px;
    border-radius: 2px;
}
.outautograph{
color: #B8B8B8;
}

.mo_bg{
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0.3;
     position: fixed;
  bottom: 0;
  left: 0;
}
.list_box{
      position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
   border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.tip{
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: center;
}
.tls{
    font-size: 12px;
    color: #7D7D7D;
}
.main_btn{
    color: #CD756E;
}
.coloer{
    border-top: 6px solid #e3e4e5;
}
</style>